<template>
  <div>
    <main class="container">
      <div class="city-search">
        <input
          type="text"
          class="city-search-input"
          placeholder="请输入城市名称"
          v-model.trim="inputCity"
          @input="handleInput"
        />
        <div v-show="inputCity != ''" class="city-name">
          <div v-if="isCity" @click="handleClick(adcode, getCity)">
            {{ getCity }}
          </div>
          <div v-else>似乎没有找到您查找的城市</div>
        </div>
      </div>
      <div v-show="inputCity != '' ? isShow : true" class="city-save">
        <div v-if="isShow">
          暂时没有保存过城市天气信息，请查询后点击右上角"+"号保存。
        </div>
        <ul v-else>
          <li
            v-for="(savecity, index) of savecitys"
            :key="index"
            class="city-list"
            @mouseover="handleOver(index)"
            @mouseout="handleOut()"
          >
            <div class="city-list-info">
              <h3>{{ savecity.city }}</h3>
              <span>{{ savecity.temp }}度</span>
            </div>
            <div class="city-list-btn" v-show="active == savecity.adcode">
              <button @click="handleClick(savecity.adcode, savecity.city)">
                查看
              </button>
              <button @click="handleDel(savecity.adcode)">删除</button>
            </div>
          </li>
        </ul>
        <h2>近期天气</h2>
      </div>
      <weather-forecasts></weather-forecasts>
    </main>
  </div>
</template>

<script>
import WeatherForecasts from '@/components/WeatherForecasts'
import { getAdcode } from '@/api/weather'

export default {
  name: 'LocalWeather',
  components: {
    WeatherForecasts
  },
  data() {
    return {
      inputCity: '',
      isCity: false,
      getCity: '',
      adcode: '',
      isShow: false,
      savecitys: [],
      active: false
    }
  },
  created() {
    let res = localStorage.getItem('savecitys')
    if (!res) {
      localStorage.setItem('savecitys', JSON.stringify([]))
    } else {
      this.savecitys = JSON.parse(res)
    }
    if (this.savecitys[0]) {
      this.isShow = false
    } else {
      this.isShow = true
    }
  },
  updated() {
    if (this.savecitys[0]) {
      this.isShow = false
    } else {
      this.isShow = true
    }
  },
  methods: {
    handleInput() {
      getAdcode(this.inputCity).then(res => {
        if (res.data.infocode == 10000) {
          this.isCity = true
          this.getCity =
            res.data.geocodes[0].city + res.data.geocodes[0].district
          this.adcode = res.data.geocodes[0].adcode
          this.lives = res.data.geocodes[0].lives
        } else {
          this.isCity = false
        }
      })
    },
    handleClick(adcode, city) {
      this.$router.push({
        path: '/weather/' + adcode,
        query: {
          serach: city
        }
      })
    },
    handleDel(adcode) {
      const index = this.savecitys.findIndex(item => item.adcode == adcode)
      this.savecitys.splice(index, 1)
      localStorage.setItem('savecitys', JSON.stringify(this.savecitys))
    },
    handleOver(index) {
      this.active = this.savecitys[index].adcode
    },

    handleOut() {
      this.active = ''
    }
  }
}
</script>

<style scoped>
main {
  font-size: 16px;
  color: #fff;
}
main .city-search {
  padding-top: 16px;
}
main .city-search .city-search-input {
  width: 100%;
  height: 40px;
  padding: 4px 8px;
  margin-top: 80px;
  background-color: transparent;
  font-size: 100%;
  line-height: inherit;
  color: inherit;
  appearance: none;
  border: none;
  outline: none;
  border-bottom: 1px solid #fff;
  box-sizing: border-box;
}
.city-search-input::-webkit-input-placeholder {
  color: #a9a9a9;
}
main .city-search .city-search-input:focus {
  border-bottom: 1px solid rgb(0 78 113 / 0.9);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.city-search .city-name {
  height: 40px;
  padding-left: 8px;
  margin-top: 8px;
  background: #004e71;
  line-height: 40px;
  box-sizing: border-box;
}
main .city-save {
  margin-top: 32px;
}
.city-save div {
  text-align: center;
}
main h2 {
  margin-top: 24px;
  height: 24px;
}
.city-list {
  display: flex;
  justify-content: space-between;
  gap: 0px;
  transition: all 0.3s;
}
.city-list:hover {
  gap: 20px;
}
.city-list-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100%);
  height: 40px;
  padding: 0 16px;
  margin-bottom: 16px;
  background: #004e71;
  font-size: 16px;
  cursor: pointer;
}
.city-list-btn {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.city-list-btn button {
  width: 80px;
  height: 40px;
  padding: 8px 16px;
  background: #eab308;
  color: #fff;
  appearance: none;
  border: none;
  outline: none;
}
</style>
